<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <script>
      // 存放副作用函数的桶
      var bucket = []
      var obj = {a:1,b:2}
      const proxy = new Proxy(obj,{
        get(target,key){
          return target[key]
        },
        set(target,key,value){
          target[key] = value
          bucket.forEach(fn=>fn())
          return true
        }
      })

      function effect(){
        document.body.innerHTML = proxy.a
      }

      bucket.push(effect)

      function effect2(){
        console.log(proxy.a);
      }

     

      bucket.push(effect2)
      bucket.push(effect2)
      
      function effect3(){
        console.log(proxy.b);
      }

      bucket.push(effect3)
     

      effect()

      setTimeout(() => {
        proxy.a = 22
      }, 2000);
    </script>
</body>
</html>